<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
    <link rel="stylesheet" href="/static/dist/vendor/simple-line-icons/css/simple-line-icons.css">
    <link rel="stylesheet" href="/static/dist/vendor/font-awesome/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="/static/dist/css/styles.css">
</head>
<body style="background-image: url(/static/dist/imgs/logo1.jpg);background-size: cover">
<div class="page-wrapper flex-row align-items-center">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-5">
                <div class="card p-4">
                    <div class="card-header text-center text-uppercase h4 font-weight-light">
                        用户注册
                    </div>
                     <form action="{% url 'users:register' %}" method="post">
                        {% csrf_token %}
                         <div class="card-body py-4">
                             <div class="form-group">
                                 <label class="form-control-label">用户名</label>
                                 {{ register_form.username }}
                             </div>

                             <div class="form-group">
                                 <label class="form-control-label">密码</label>
                                 {{ register_form.password1 }}
                             </div>

                             <div class="form-group">
                                 <label class="form-control-label">确认密码</label>
                                 {{ register_form.password2 }}
                             </div>
                             <div class="form-group">
                                     <label class="form-control-label">验证码</label>
                            <img src="{{ image_url }}" alt="captcha"
                                 class="captcha">
                            <input type="hidden" name="captcha_0" value="{{ hashkey }}"
                                   required="" id="id_captcha_0">
                            <input type="text" name="captcha_1" required="True" id="id_captcha_1" autocapitalize="off"
                                   autocomplete="off" autocorrect="off" spellcheck="false" class="form-control">
                             </div>
                         </div>

                         <div class="card-footer">
                               <h6 style="color:red;" class="text-center">{{ msg }}</h6>
                             <button type="submit" class="btn btn-success btn-block">立即注册</button>
                         </div>
                     </form>

                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/dist/vendor/jquery/jquery.min.js"></script>
<script src="/static/dist/vendor/popper.js/popper.min.js"></script>
<script src="/static/dist/vendor/chart.js/chart.min.js"></script>
<script src="/static/dist/js/carbon.js"></script>
<script src="/static/dist/js/demo.js"></script>
<script>
     $(function() {
        $(".captcha").click(function () {
          $.getJSON("{% url 'users:register' %}",function(result){
            $('.captcha').attr('src', result.image_url);
            $('#id_captcha_0').val(result.key);
          });
      });
      });
</script>
</body>
</html>
